<template>
  <div class="register_container">
    <h1 class="text_2">河湖空间大数据平台机构注册</h1>
    <div class="register_box">
      <!--注册表单区域-->
      <el-form ref="resetForm" class="register_form" formData :model="formData" :rules="rules" label-width="0px" @keyup.enter.native="register()">
        <!--用户名-->
        <el-form-item prop="institutionName">
          <el-input v-model="formData.institutionName" placeholder="请输入机构名称" prefix-icon="el-icon-user-solid" clearable>
          </el-input>
        </el-form-item>

        <!--编号输入-->
        <el-form-item prop="institutionId">
          <el-input v-model="formData.institutionId" placeholder="请输入机构编号" prefix-icon="el-icon-phone" clearable>
          </el-input>
        </el-form-item>

        <!--行政区划输入-->
        <el-form-item prop="regionName">
          <el-input v-model="formData.regionName" placeholder="请输入所在的行政区划" prefix-icon="el-icon-phone" clearable>
          </el-input>
        </el-form-item>

        <!--行政区划输入-->
        <el-form-item prop="regionId">
          <el-input v-model="formData.regionId" placeholder="请输入所在的行政区划编号" prefix-icon="el-icon-phone" clearable>
          </el-input>
        </el-form-item>

        <!--备注输入-->
        <el-form-item prop="note">
          <el-input v-model="formData.note" placeholder="备注" prefix-icon="el-icon-phone" clearable>
          </el-input>
        </el-form-item>

        <!--按钮区域-->
        <el-form-item class="btns">
          <el-button type="primary" @click="register('formData')" icon="el-icon-s-promotion">注册</el-button>
          <el-button @click="resetForm('formData')" icon="el-icon-setting">重置</el-button>
        </el-form-item>
        <router-link to="login" class="active_1">已有账户？请登录</router-link>
        <router-link to="Register" class="active_2">用户注册</router-link>
      </el-form>
    </div>

  </div>
</template>

<script>
  import {institutionregister} from  "../Api/api"

  export default {
      data() {
        return {
          formData: {
            institutionName: '',
            institutionId: '',
            regionName: '',
            regionId: '',
            note: ''
          },
          rules: {
            institutionName: [{required: true, message: '机构名称不能为空', trigger: 'blur'}],
            institutionId: [{required: true, message: '机构编号不能为空', trigger: 'blur'}],
            regionName: [{required: true, message: '行政区划不能为空', trigger: 'blur'}],
            regionId: [{required: true, message: '行政区划编号不能为空', trigger: 'blur'}],
          }
        };
      },
      methods: {
        institutionregister(){
          let that = this;
          insitutionregister(that.formData).then(function (res) {
            console.log(res);
            if (res.data.code === 200) {
              that.$router.push({path: "/"});
              that.institutionregister = false;
              that.login = true;
            } else if (res.data.code === 204) {
              alert('该机构已被注册！请勿重复注册')
            }else{
              alert('注册失败！')
            }
          })
        },

        resetForm() {
          this.$refs.resetForm.resetFields();
        }
      }
    }
</script>

<style scoped>
  .text_2{
    color: #f1ffdf;
    font-family: 黑体;
    font-size: 50px;
    font-weight: bolder;
    position: absolute;
    margin-top: 50px;
    left: 50%;
    transform: translate(-50%);
  }

  .register_container{
    background-color: #0093E9;
    background-image: linear-gradient(316deg, #0093E9 0%, #80D0C7 100%);
    height: 100%;
    margin-top: 0;
  }

  .register_box{
    width: 500px;
    height: 450px;
    background-color: #fff;
    border-radius: 5px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
  }

  .btns{
    display: flex;
    justify-content: flex-end;

  }

  .register_form{
    position: absolute;
    bottom: 20px;
    top: 30px;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .institutionName{
    width:460px;
  }

  .active_1{
    text-decoration: none;
    position: absolute;
    left: 25%;
    color: #2e9afa;
  }
  .active_2{
    text-decoration: none;
    position: absolute;
    right: 25%;
    color: #2e9afa;
  }
</style>
